<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { requestSongCategory, requestHighqualityList, requestHighqualitySongList } from '../../utils/axiosURL'
import PlayListIntroduction from '@components/common/PlaylistIntroduction/index.vue'


const cateTitle = reactive<any>([])
// 精品歌单标签列表
const fineProducts_tagList = reactive<any>([])
// 精品歌单数据
const fineProducts_songListData = reactive<any>([])
// tag 点击下标
const tagClickIndex = ref<number | null | boolean>(null)
// 请求的 tag
const requestTag = ref<string>('全部')
// 精品歌单的第一项数据
const fineProductsFirst = reactive<any>({})
// 所有分类
const allSub = reactive<any>([])
// 更多标签容器的显示状态
let moresTagsWrapShowState = ref<boolean>(false)
// 无数据
let notData = ref<boolean>(false)



// 歌单分类
const requestSongCategoryFn = () => {
  requestSongCategory().then((data: any) => {
    cateTitle.values = Object.values(data.categories)
    allSub.values = data.sub
  }).catch(_ => { })
}

// 精品歌单标签列表
const requestHighqualityListFn = () => {
  requestHighqualityList().then((data: any) => {
    fineProducts_tagList.values = data.tags.slice(0, 10)
  }).catch(_ => { })
}

// 获取精品歌单
const requestHighqualitySongListFn = () => {
  requestHighqualitySongList(50, requestTag.value).then((data: any) => {
    if (!data.playlists.length) return notData.value = true
    fineProductsFirst.values = data.playlists[0]
    fineProducts_songListData.values = data.playlists.splice(1, data.playlists.length - 1)
  }).catch(_ => { })
}

// 点击 tag 时间处理函数
const clickTagFn = (index: number, name: string) => {
  tagClickIndex.value = index
  requestTag.value = name
}

// 监听 requestTag 字段的变化
watch(requestTag, () => {
  notData.value = false
  requestHighqualitySongListFn()
})

// 点击全部歌单的事件处理函数
const clickAllTagFn = () => {
  tagClickIndex.value = null
  requestTag.value = '全部'
  moresTagsWrapShowState.value = false
}

// 更多标签容器切换显示状态的事件处理函数
const changeShowStateFn = () => {
  moresTagsWrapShowState.value = !moresTagsWrapShowState.value
}

// 点击标签的事件处理函数
const clickMoresTagItemFn = (name: string) => {
  requestTag.value = name
  tagClickIndex.value = false
  moresTagsWrapShowState.value = false
}


window.addEventListener('click', () => moresTagsWrapShowState.value = false)

onMounted(() => {
  requestSongCategoryFn()
  requestHighqualityListFn()
  requestHighqualitySongListFn()
})

</script>


<template>
  <div class="songListWrap">
    <RouterLink :to="{ path: '/BestPlaylist', query: { cat: requestTag } }">
      <div class="FineProductsSongList">
        <div class="gaussianBlur" v-if="fineProducts_songListData.values.length !== 0">
          <img :src="fineProductsFirst.values?.coverImgUrl" alt="">
          <div class="cover">
            <img :src="fineProductsFirst.values?.coverImgUrl" alt="">
          </div>
          <div class="description">
            <div class="fineProductsLogo">
              <span class="iconfont icon-icon_huangguan"></span>
              <span class="fineProductsListText">精品歌单</span>
            </div>
            <p class="fineProductsListTitle">{{ fineProductsFirst.values?.name }}</p>
          </div>
        </div>
      </div>
    </RouterLink>
    <div class="tagWraps">
      <div class="categoryTag">
        <button class="tagCate" @click.stop="changeShowStateFn">
          <span>{{ requestTag }}</span>
          <span class="iconfont icon-xiangyoujiantou"></span>
        </button>
        <ul>
          <li v-for="(item, index) in fineProducts_tagList.values" @click="clickTagFn(index, item.name)"
            :class="`${item.name === requestTag ? 'bkTag' : ''}`">{{ item.name }}</li>
        </ul>
        <div class="moreTag" v-if="moresTagsWrapShowState" @click.stop>
          <div class="AllTag">
            <button @click.stop="clickAllTagFn" class="tagCate" :class="tagClickIndex === null ? 'AllTagDefault' : ''">
              <span>全部歌单</span>
            </button>
          </div>
          <div class="cateItem" v-for="(item, index) in cateTitle.values">
            <div class="cateItemName">
              <span class="iconfont icon-wangluo" v-if="index === 0"></span>
              <span class="iconfont icon-yinglangshangwufenggetubiao-12" v-if="index === 1"></span>
              <span class="iconfont icon-kafei" v-if="index === 2"></span>
              <span class="iconfont icon-xiaolian" v-if="index === 3"></span>
              <span class="iconfont icon-zhuti" v-if="index === 4"></span>
              <span>{{ item }}</span>
            </div>
            <ul>
              <li v-for="item in allSub.values.filter(item => item.category === index)"
                @click="clickMoresTagItemFn(item.name)" :class="requestTag === item.name ? 'AllTagDefault' : ''">
                <span>{{ item.name }}</span>
                <span v-if="item.hot" class="iconfont icon-icon-test"></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="goodMusic">
      <div v-if="notData" class="noAuthrity">Sorry 无数据</div>
      <div v-else-if="fineProducts_songListData.values.length !== 0" class="everydayRecommen">
        <PlayListIntroduction v-for="item in fineProducts_songListData.values" :picUrl="`${item?.coverImgUrl}`"
          :name="`${item?.name}`" :playcount="`${item?.playCount}`" :id="`${item?.id}`" />
      </div>
      <div v-else class="everydayRecommen">
        <playListIntroduceSkeleton v-for="item in 10" />
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.songListWrap {
  width: 100%;
  height: 93%;
  padding-bottom: 80px;
  box-sizing: border-box;
  overflow: auto;

  .FineProductsSongList {
    width: 100%;
    height: 180px;
    padding-right: 30px;
    box-sizing: border-box;
    cursor: pointer;

    .gaussianBlur {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      overflow: hidden;

      >img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: blur(20px);
      }

      .cover {
        z-index: 1;
        flex-basis: 150px;
        width: 150px;
        height: 150px;
        margin-left: 15px;
        background-color: #4a4a4a;
        border-radius: 6px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
      }

      .description {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1;
        flex: 1;
        height: 150px;
        margin-left: 10px;

        .fineProductsLogo {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          width: 110px;
          height: 30px;
          border: 1px solid rgb(231, 170, 90);
          border-radius: 25px;

          span {
            font-family: $textFont;
            font-size: $font-size-sm;
            color: rgb(231, 170, 90);
          }
        }

        .fineProductsListTitle {
          @extend .moduleTitle;
          color: #fff;
        }

      }
    }
  }

  .tagWraps {
    width: 100%;
    height: 60px;
    padding-right: 30px;
    box-sizing: border-box;

    .categoryTag {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;

      .tagCate {
        @extend .clearButton;
        border: 1px solid rgba(0, 0, 0, 0.15);
        padding: 6px 30px;
        border-radius: 25px;

        span {
          font-size: $font-size-sm;
        }

        &:hover {
          background-color: rgb(242, 242, 242);
        }
      }

      >ul {
        display: flex;

        >li {
          line-height: 20px;
          font-size: $font-size-sm;
          color: $font_main_color;
          font-family: $textFont;
          padding: 0 10px;
          border-radius: 25px;
        }

        .bkTag {
          @include background_color('bk_color');
          @include color('color');
        }
      }

      .moreTag {
        z-index: 1;
        position: absolute;
        top: 50px;
        left: 2px;
        width: 100%;
        padding: 10px 0;
        box-sizing: border-box;
        background-color: #fff;
        box-shadow: 0 0 7px -3px gray;
        border-radius: 4px;

        .AllTag {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: 60px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.17);

          .tagCate {
            @extend .clearButton;
            padding: 6px 15px;
            border-radius: 25px;
            margin-left: 30px;

            span {
              font-size: $font-size-sm;
            }
          }

          .AllTagDefault {
            @include background_color('bk_color');
            @include color('color');
          }
        }

        .cateItem {
          display: flex;
          align-items: center;
          padding: 15px 0 15px 30px;

          .cateItemName {
            flex-basis: 120px;
            font-size: $font-size-sm;
            color: $font_second_color;
            font-family: $textFont;

            span:nth-child(1) {
              font-size: $font-size-lg2 !important;
              vertical-align: -4px;
              margin-right: 10px;
            }
          }

          ul {
            flex: 1;
            display: flex;
            flex-wrap: wrap;

            li {
              position: relative;
              width: 80px;
              text-align: center;
              line-height: 40px;
              font-size: $font-size-sm;
              color: $font_main_color;
              font-family: $textFont;
              padding: 0 10px;
              border-radius: 25px;

              .icon-icon-test {
                position: absolute;
                top: -10px;
                right: 15px;
                @include logo_color('logo_color');
              }
            }

            .AllTagDefault {
              @include background_color('bk_color');
              @include color('color');
            }
          }
        }
      }
    }
  }

  .goodMusic {
    width: 100%;
    margin-top: 20px;
    padding-left: 2px;
    box-sizing: border-box;

    .noAuthrity {
      width: 100%;
      text-align: center;
      margin-top: 30px;
      font-family: $activeTextFont;
      font-size: $font-size-lg2;
    }

    // 歌单
    .everydayRecommen {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 10px;

      // 歌单的每一项
      .songItem {
        position: relative;
        width: 18%;
        margin-right: 15px;

        .imgWrap {
          position: relative;
          overflow: hidden;

          .itemBkImg {
            width: 100%;
            height: 140px;
            max-height: 211px;
            border-radius: $borderRadius8;
          }

          .calendarImg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 95px;
            height: 92px;
            text-align: center;
          }

          .getDate {
            position: absolute;
            top: calc(50% - 15px);
            left: calc(50% - 23px);
            color: $font_hover_color;
            font-family: $activeTextFont;
            font-size: 44px;
          }

          .topInfomation {
            position: absolute;
            top: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.489);
            border-radius: $borderRadius8 $borderRadius8 0 0;
            font-size: $font-size-sm;
            padding: 4px;
            box-sizing: border-box;
            color: $font_default_color ;
            font-family: $textFont;
            transform: translateY(-100%);
            transition: .4s;
          }

          .playBtn {
            display: inline-block;
            opacity: 0;
            position: absolute;
            right: 8px;
            bottom: 12px;
            width: 30px;
            height: 30px;
            background-color: $theme-white;
            border-radius: 50%;
            transition: 1s;

            img {
              position: absolute;
              top: 1px;
              right: 0;
              bottom: 0;
              left: 3px;
              margin: auto;
              width: 24px;
              height: 24px;
            }
          }

          &:hover .topInfomation {
            transform: translateY(0%);
          }

          &:hover .playBtn {
            opacity: 1;
          }
        }

        .songListDesc {
          font-family: $textFont;
          font-size: $font-size-sm;
          line-height: 20px;
        }
      }
    }
  }
}

:deep(.el-skeleton) {
  margin: 0 10px 0 0;
}
</style>
